<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-unused-vars -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="kao" >
       <div>
         <el-card class="box-card">
           <el-row :gutter="20">
             <el-col :span=8>
                 <el-input
                     placeholder="请输入类型名称内容进行查询"
                     v-model="typeSname"
                     clearable>
                 </el-input>
             </el-col>
             <el-col :span=1.5>
              <!-- <el-button icon="el-icon-search" circle @click="queryCommodityTypeByName"></el-button> -->
                 <el-button type="primary" @click="queryCommodityTypeByName">查询</el-button>
             </el-col>
             <el-col :span=1.5>
                 <el-button v-power functionCode="commodityType:add" type="success" @click="openCommodityTypeAddWindow">新增</el-button>
             </el-col>
         </el-row>
         <el-table
         :data="kaoData"
         border
         style="width: 100%">
         <el-table-column
           prop="id"
           label="序号"
           width="60">
          </el-table-column>
          <el-table-column
           prop="typeSname"
           label="类型名称"
           width="150">
          </el-table-column>
           <el-table-column
             prop="imgId"
             label="类型图片"
             width="100">
             <template slot-scope="scope">
              <el-image
                  style="width: 100px height: 100px"
                  :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.imgId"
                  ></el-image>
          </template>
            </el-table-column>
           <el-table-column
           prop="back"
           label="备注"
           width="200">
           </el-table-column>
           <el-table-column
           prop="typeId"
           label="类型"
           width="100">
           <template slot-scope="scope">
          {{scope.row.typeId==66?"陶艺雕塑" :scope.row.typeId==65?"刺绣编制" :scope.row.typeId==64?"奶油胶":scope.row.typeId==63?"甜点":scope.row.typeId==62?"绘画":scope.row.typeId==61?"银饰":"该选择小类型所属大类型！"}}
        </template>
           </el-table-column>
           <el-table-column
           prop="createTime"
           label="创建时间"
           width="150">
           </el-table-column>
           <el-table-column
           prop="updateTime"
           label="修改时间"
           width="170">
           </el-table-column>
         <el-table-column
         fixed="right"
         label="操作"
         >
             <template slot-scope="scope">
               <!-- <el-button   @click="openCommodityTypeInfoWindow(scope.row)"  type="primary" size="small">查看</el-button> -->
               <el-button v-power functionCode="commodityType:update"  @click="openupCommodityTypeInfoWindow(scope.row)"  type="success" size="small">编辑</el-button>
               <el-button v-power functionCode="commodityType:delete"  @click="delCommodityTypeInfo(scope.row)" type="danger" size="small">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
         <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="1"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </el-card>
     <el-dialog
       title="类型修改"
       :visible.sync="openUpdatewindows"
       width="40%">
       <el-form :model="openupdate" :rules ="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="商品主图" prop="name">
      <el-upload
      class="avatar-uploader"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
      </el-form-item>
      <el-form-item label="类型名称" prop="typeSname">
       <el-input v-model="openupdate.typeSname"></el-input>
      </el-form-item>
      <el-form-item label="上层分类" prop="typeId">
       <el-select v-model="openupdate.typeId" placeholder="请选择类型">
        <el-option label="银饰" value="61"></el-option>
        <el-option label="绘画" value="62"></el-option>
        <el-option label="甜点" value="63"></el-option>
        <el-option label="奶油胶" value="64"></el-option>
        <el-option label="刺绣编制" value="65"></el-option>
        <el-option label="陶艺雕塑" value="66"></el-option>
      </el-select>
      </el-form-item>
        <el-form-item label="类型备注"  prop="back">
        <el-input v-model="openupdate.back"></el-input>
        </el-form-item>
     </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="openUpdatewindows = false">取 消</el-button>
           <el-button type="primary" @click="update(openupdate)">确 定</el-button>
         </span>
       </el-dialog>
         <!--    查看详细信息  -->
    <el-dialog title="信息" :visible.sync="kaoInfoWindow" width="40%">
      <el-form :model="carB" :disabled="true" label-width="100px" class="demo-ruleForm">
    <el-form-item label="图片" >
      <template slot-scope="scope" >
          <!-- :src="`http://localhost:8989/getImageById?id=${scope.row.imageId}`" -->
           <el-image style="width: 100px; height: 100px" :src="'http://localhost:8989/getImageById?id='+kaoB.imageId"></el-image>
      </template>
    </el-form-item>
       <el-form-item label="名字" prop="typeSname">
         <el-input :value="kaoB.typeSname"></el-input>
       </el-form-item>
       <el-form-item label="电话" prop="kaoPrice">
         <el-input :value="kaoB.kaoPhone"></el-input>
       </el-form-item>
        <el-form-item label="备注" prop="back">
             <el-input v-model="kaoB.back"></el-input>
           </el-form-item>
     </el-form>
   </el-dialog>
 <el-dialog
   title="添加"
   :visible.sync="dialogVisible"
   width="40%">
   <el-form :model="kaoForm" :rules ="rules" ref="ruleForm" label-width="100px">
     <!-- 添加图片 -->
     <el-form-item label="类型图片">
     <el-upload
  class="avatar-uploader"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
      <el-form-item label="类型名称" prop="typeSname">
       <el-input v-model="kaoForm.typeSname"></el-input>
      </el-form-item>
      <!-- <el-form-item label="所属大类型" prop="typeId" >
       <el-input v-model="kaoForm.typeId" placeholder="选择订单状态"></el-input>
      </el-form-item> -->
      <el-form-item label="所属大分类" prop="typeId">
       <el-select v-model="kaoForm.typeId" placeholder="请选择类型">
        <el-option label="银饰" value="61"></el-option>
        <el-option label="绘画" value="62"></el-option>
        <el-option label="甜点" value="63"></el-option>
        <el-option label="奶油胶" value="64"></el-option>
        <el-option label="刺绣编制" value="65"></el-option>
        <el-option label="陶艺雕塑" value="66"></el-option>
      </el-select>
      </el-form-item>
        <el-form-item label="类型备注" prop="back">
         <el-input v-model="kaoForm.back"></el-input>
        </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
     </span>
   </el-dialog>
       </div>
     </div>
 </template>
<script>
// 创建类型名信息组件
export default {

data () {
  return {
    file:'',
    total: 0, // 总数量
    openupdate: [],
    kaoInfoWindow: false, // 查看窗口
    kaoB: {}, // 定义
    typeSname: '', //类型名
    imageUrl: '',
    imageFile: null,
    kaoData: [{
    }],
    openUpdatewindows: false,
    dialogVisible: false,
    kaoForm: {
      id: '',
      typeSname: '',
      typeId: '',
      back: '',
      imgId: '',
      createTime: '',
      updateTime: '',
      delFlag: '0'
    },
    rules: {
      typeSname: [
        { required: true, message: '请输入类型名称', trigger: 'blur' },
        { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
      ],
      typeId: [
        { required: true, message: '请输入类型名称', trigger: 'blur' },
        { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
      ],
      back:[
        { required: true, message: '请输入类型名称', trigger: 'blur' },
        { min: 1, max: 10, message: '长度在1到50个字符', trigger: 'blur' }
      ],
    }
  }
},
mounted () { // 页面加载的时候所加载的方法
  // 初始化页面数据
  this.queryCommodityTypeByName()
},
methods: {
  handleSizeChange (val) {
    this.pageSize = val
    this.queryCommodityTypeByName()
  },
  handleCurrentChange (val) {
    this.pageNum = val
    this.queryCommodityTypeByName()
  },
  handleAvatarSuccess (res, file) {
    this.imageUrl = URL.createObjectURL(file.raw)
  },
  beforeAvatarUpload (file) {
    const isJPG = file.type === 'image/jpeg'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      this.$message.error('上传图片只能是 JPG 格式!')
      return false
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 2MB!')
      return false
    }
    this.imageFile = file
    this.imageUrl = URL.createObjectURL(file)
    return false
  },
  // 修改
  update (formName) {
    console.log(this.$refs.ruleForm)
        var formdata = new FormData()
        if(this.imageFile){
          formdata.set('typeImg',this.imageFile,this.imageFile.fillname)
        }
        formdata.set('id', formName.id)
        formdata.set('imgId', formName.imgId)
        formdata.set('typeId', formName.typeId)
        formdata.set('typeSname', formName.typeSname)
        formdata.set('back', formName.back)
        this.$axios.post('CommodityType/CommodityTypeUpdate',
        formdata
        ).then(res => {
          if (res.data.flag) {
            this.myMessage('success', '恭喜你，修改成功！')
            this.openUpdatewindows = false // 关闭窗口
            this.kaoForm = {
              id: '',
              typeSname: '',
              typeId: '',
              imgId: '',
              back: '',
              createTime: '',
              updateTime: '',
            }
            this.queryCommodityTypeByName()// 全查刷新
          }else{
            this.myMessage('warning', '对不起，修改失败，请稍后再试')
          console.log(err)
          }
        })
    
  },
  delCommodityTypeInfo (id) { // 删除类型名信息
    this.$confirm('此操作将删除该类型名信息，是否继续？', '提示', {
      cofirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(res => {
      // eslint-disable-next-line no-undef
      this.$axios.delete('CommodityType/delCommodityTypeById?id=' + id.id
      ).then(res => {
        if (res.status === 200) {
          this.myMessage('success', '删除成功！')
          this.queryCommodityTypeByName()
        } else {
          this.myMessage('warning', '删除失败！')
        }
      }).catch(res => {
        this.myMessage('error', '删除失败，请联系管理员！')
      })
    }).catch(() => {
      this.myMessage('info', '已取消删除')
    })
  },
  queryCommodityTypeByName () { // 通过姓名查询类型名信息
    // eslint-disable-next-line no-undef
    this.$axios.get('CommodityType/getCommodityTypeByPage',
      {
        params: {
          typeSname: this.typeSname,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      }
    ).then(res => {
      this.kaoData = res.data.data.content
      console.log(this.kaoData)
      // console.log('-------------------')
      this.total = res.data.data.totalSize
    }).catch(err => {
      console.log(err)
    })
  },
  saveCommodityTypeInfo () { // 保持信息
  },
  openCommodityTypeAddWindow () { // 打开新增窗口
    this.dialogVisible = true
    this.imageUrl = ''
  },
  openCommodityTypeInfoWindow (row) { // 打开查看窗口
    this.kaoInfoWindow = true
    this.kaoB = row
  },
  openupCommodityTypeInfoWindow (row) { // 修改查看窗口
    this.openUpdatewindows = true
    this.openupdate = JSON.parse(JSON.stringify(row))

    this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + row.imgId
    // this.openupdate= row
  },
  // 添加
  submitForm (formName) {
    console.log(this.$refs.ruleForm)
    this.$refs[formName].validate((valid) => {
      if (valid) {
        var formdata = new FormData()
        for(var a in this.kaoForm){
          if(this.kaoForm[a]){
            formdata.set(a,this.kaoForm[a])
          }
        }
        if(this.imageFile){
          formdata.set('typeImg',this.imageFile,this.imageFile.fillname)
        }
        this.$axios.post('CommodityType/publishCommodityTypeAdd',
        formdata
        ).then(res => {
          if (res.status === 200) {
            this.myMessage('success', '恭喜你，添加成功！')
            this.dialogVisible = false // 关闭窗口
            this.$refs[formName].resetFields()
            this.kaoForm = {
              id: '',
              typeSname: '',
              typeId: '',
              imgId: '',
              back: '',
              createTime: '',
              updateTime: '',
              delFlag: '0'
            }
            this.queryCommodityTypeByName()// 全查刷新
          }
        }).catch(err => {
          this.myMessage('warning', '对不起，保存失败，请稍后再试')
          console.log(err)
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  },
  myMessage (type, message) {
    this.$message({
      message: message,
      type: type
    })
  }
}
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

